{% extends 'layout/manage.html' %}
{% load static %}
{% block css %}
    <style>
        .panel-default {
            margin-top: 20px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-default > .panel-heading a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }

        .panel-default > .panel-heading .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

        .upload-progress {
            position: fixed;
            right: 2px;
            bottom: 2px;
            width: 400px;
        }

        .upload-progress .progress-error {
            color: red;
        }

    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <div>
                    <a href="{% url 'web:file' project_id=request.tracer.project.id %}">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>文件夹</span>
                    </a>
                    {% for record in breadcrumb_list %}
                        <a href="{% url 'web:file' project_id=request.tracer.project.id %}?folder={{ record.id }}">
                            <i class="fa fa-caret-right" aria-hidden="true"></i>
                            <span>{{ record.name }}</span>
                        </a>
                    {% endfor %}
                </div>
                <div class="function">
                    <div class="btn btn-primary btn-xs upload" style="position: relative">
                        <div><i class="fa fa-upload" aria-hidden="true">上传文件</i></div>
                        <input type="file" multiple name="uploadFile" id="uploadFile">
                    </div>
                    <a class="btn btn-success btn-xs" href="" data-toggle="modal" data-target="#addModal"
                       data-whatever="新建文件夹">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i>新建文件夹
                    </a>
                </div>
            </div>

            <!-- Table -->
            <table class="table">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>文件大小</th>
                    <th>更新者</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="rowList">
                {% for item in file_object %}
                    <tr>
                        <td>
                            {% if item.file_type == 1 %}
                                <i class="fa fa-file" aria-hidden="true"></i>
                                {{ item.name }}
                            {% else %}
                                <a href="{% url 'web:file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                                    <i class="fa fa-folder" aria-hidden="true"></i>
                                    {{ item.name }}
                                </a>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.file_type == 1 %}
                                {{ item.file_size }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ item.update_user.username }}</td>
                        <td>{{ item.update_datetime }}</td>
                        <td>
                            {% if item.file_type == 2 %}
                                <a class="btn btn-default btn-xs" data-toggle="modal" data-target="#addModal"
                                   data-name="{{ item.name }}"
                                   data-fid="{{ item.id }}"
                                   data-whatever="修改文件夹">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                </a>
                            {% else %}
                                <a href="{% url 'web:file_download' project_id=request.tracer.project.id file_id=item.id %}" class="btn btn-default btn-xs">
                                    <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                </a>
                            {% endif %}
                            <a class="btn btn-danger btn-xs" href="" data-toggle="modal" data-target="#alertModal"
                               data-fid="{{ item.id }}">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel"></h4>
                    </div>
                    <div class="modal-body">
                        <form id="form">
                            {% csrf_token %}
                            <input class="hide" type="text" name="fid" id="fid">
                            {% for field in form %}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                </div>
                            {% endfor %}
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                        <button id="btnFormSubmit" type="button" class="btn btn-primary">确 定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="alert alert-danger alert-dismissable fade in" role="alert">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                        <h4>是否确定删除？</h4>
                        <p style="padding-top: 20px;padding-bottom: 20px">
                            文件夹中包含的所有的文件都会被删除。
                        </p>
                        <p style="text-align: right">
                            <a href="" class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close">取 消</a>
                            <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="uploadProgress" class="upload-progress hide">
            <div class="panel panel-primary">
                <div class="panel-heading"><i class="fa fa-cloud-upload" aria-hidden="true"></i>上传进度</div>
                <table class="table">
                    <tbody id="progressList">

                    </tbody>
                </table>

            </div>
        </div>

        <!-- 进度条模版 -->
        <div class="hide">
            <table id="progressTemplate">
                <tr>
                    <td>
                        <div class="name"></div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                                 aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0">
                                0%
                            </div>
                        </div>
                        <div class="progress-error"></div>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 文件内容展示模版 -->
        <div class="hide">
            <table id="rowTpl">
                <tr>
                    <td>
                        <i class="fa fa-file" aria-hidden="true"></i>
                        <span class="name"></span>
                    </td>
                    <td class="file-size"></td>
                    <td class="username"></td>
                    <td class="datetime"></td>
                    <td>
                        <a href="" class="btn btn-default btn-xs download">
                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                        </a>
                        <a href="" class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#alertModal">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </a>
                    </td>
                </tr>
            </table>
        </div>

    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/cos-js-sdk-v5.min.js' %}"></script>
    <script>
        var FOLDER_URL = '{% url 'web:file' project_id=request.tracer.project.id %}';
        var FILE_DELETE_URL = '{% url 'web:file_delete' project_id=request.tracer.project.id %}';
        var COS_OBJECT_URL = '{% url 'web:cos_credential' project_id=request.tracer.project.id %}';
        var FILE_POST = '{% url 'web:file_post' project_id=request.tracer.project.id %}';
        var CURRENT_FOLDER_ID = '{{ folder_object.id }}';

        $(function () {
            initAddModal();
            bindModelSubmit();
            bindDeleteSubmit();
            bindUploadFile();
        });

        function bindUploadFile() {
            $('#uploadFile').change(function () {
                // 清空上传进度条
                $('#progressList').empty();
                // 获取上传数据
                var file_list = $(this)[0].files;
                // 获取本次要上传的每个文件名称和大小,checkFileList(前端处理)
                var checkFileList = [];
                $.each(file_list, function (index, fileObject) {
                    var fileName = fileObject.name;
                    var fileSize = fileObject.size;
                    checkFileList.push({'name': fileName, 'size': fileSize});
                });
                // 把这些数据发送到django后台进行校验，如果没有问题则返回临时凭证；否则返回错误信息
                // 先获取临时凭证，在获取之前先校验
                const cos_credential = new COS({
                    // getAuthorization 必选参数
                    // 前端 - 使用 GET 但传递方法信息
                    getAuthorization: function (options, callback) {
                        const url = COS_OBJECT_URL;
                        const xhr = new XMLHttpRequest();
                        xhr.open('POST', url, true);
                        xhr.setRequestHeader('Content-Type', 'application/json');
                        xhr.onload = function (e) {
                            const res = JSON.parse(xhr.responseText);
                            if (res.status) {
                                try {
                                    const credentials = res.data.credentials;
                                    // ✅ 官方返回对象（不要改字段名）
                                    const auth = {
                                        TmpSecretId: credentials.tmpSecretId,
                                        TmpSecretKey: credentials.tmpSecretKey,
                                        SecurityToken: credentials.sessionToken,
                                        StartTime: res.data.startTime,
                                        ExpiredTime: res.data.expiredTime,
                                    };
                                    callback(auth);
                                    $('#uploadProgress').removeClass('hide');
                                } catch (parseErr) {
                                    console.error('JSON 解析失败:', parseErr);
                                    callback({code: 'ParseError', message: '后端返回不是合法 JSON'});
                                }
                            } else {
                                alert(res.error);
                            }
                        };
                        xhr.onerror = function () {
                            console.error('获取密钥网络错误');
                            callback({code: 'NetworkError', message: '无法连接后端'});
                        };
                        xhr.send(JSON.stringify(checkFileList));
                    }
                })
                // 上传文件（异步）
                $.each(file_list, function (index, fileObject) {
                    var fileName = fileObject.name;
                    var fileSize = fileObject.size;
                    var key = (new Date()).getTime() + '_' + fileName;
                    // 增加上传进度条
                    var tr = $('#progressTemplate').find('tr').clone();
                    tr.find('.name').text(fileName);
                    $('#progressList').append(tr);
                    // 上传文件
                    cos_credential.uploadFile({
                        Bucket: '{{ request.tracer.project.bucket }}', /* 必须 */
                        Region: '{{ request.tracer.project.region }}',     /* 存储桶所在地域，必须字段 */
                        Key: key,              /* 必须 */
                        Body: fileObject, // 上传文件对象
                        onProgress: function (progressData) {
                            console.log("文件上传进度--->", fileName, JSON.stringify(progressData));
                            var percent = progressData.percent * 100 + '%';
                            tr.find('.progress-bar').text(percent);
                            tr.find('.progress-bar').css('width', percent);
                        }
                    }, function (err, data) {
                        if (err) {
                            console.error('完整错误对象:', err);
                            tr.find('.progress-error').text('上传失败');
                        } else {
                            console.log('上传成功', data)
                            if (data && data.statusCode === 200) {
                                // 将本次上传的文件提交值后台django，并写入数据库
                                // 当前文件上传成功
                                $.post(FILE_POST, {
                                    name: fileName,
                                    key: key,
                                    file_size: fileSize,
                                    parent: CURRENT_FOLDER_ID,
                                    file_path: data.Location,
                                    etag: data.ETag,
                                }, function (res) {
                                    // 在数据库中写入成功之后，将添加的数据在页面中动态展示出来
                                    var newTr = $('#rowTpl').find('tr').clone();
                                    newTr.find('.name').text(res.data.name);
                                    newTr.find('.file-size').text(res.data.file_size);
                                    newTr.find('.username').text(res.data.username);
                                    newTr.find('.datetime').text(res.data.date_time);
                                    newTr.find('.delete').attr('data-fid', res.data.id);
                                    newTr.find('.download').attr('href',res.data.download_url);
                                    $('#rowList').append(newTr);
                                    // 进度条删除
                                    tr.remove();
                                    console.log(res);
                                })

                            }
                        }
                    });
                })
            })
        }

        function initAddModal() {
            $('#addModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('whatever') // Extract info from data-* attributes
                var name = button.data('name') // Extract info from data-* attributes
                var fid = button.data('fid') // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this)
                modal.find('.modal-title').text(recipient);
                if (fid) {
                    // 编辑
                    // name
                    modal.find("#id_name").val(name);
                    modal.find("#fid").val(fid);

                } else {
                    // 新建
                    modal.find('.error-msg').empty();
                    $('#form')[0].reset();
                }
            })
            $('#alertModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var fid = button.data('fid') // Extract info from data-* attributes
                $('#btnDelete').attr('fid', fid);
            })
        }

        function bindModelSubmit() {
            $('#btnFormSubmit').click(function () {
                $.ajax({
                    url: location.href,
                    type: 'POST',
                    data: $('#form').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href;
                        } else {
                            $.each(res.error, function (key, value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        function bindDeleteSubmit() {
            $('#btnDelete').click(function () {
                $.ajax({
                    url: FILE_DELETE_URL,
                    type: 'GET',
                    data: {fid: $(this).attr('fid')},
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href;
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}